<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="IP Address">
        <el-input
          type="text"
          autosize
          v-model="status.ipAddr"
          placeholder="Broadcast IP Address"
        ></el-input>
      </el-form-item>
      <el-form-item label="MAC Address">
        <el-input
          type="text"
          autosize
          v-model="status.macAddr"
          placeholder="MAC Address"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" type="primary" @click="wakeOnLan">Wake on lan</el-button>
        <el-button icon="el-icon-delete" @click="reset">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import formData from "../utils/formData"
import { ElMessage } from 'element-plus'

let status = ref<any>({
  ipAddr: "192.168.1.255",
  macAddr: "F0:DE:F1:6E:92:ED",
});

const reset = ()=>{
  status.ipAddr = "";
  status.macAddr = "";
}
const wakeOnLan = () => {
  fetch("/api/wol", {
    credentials: "include",
    method: "POST",
    headers: {
      Accept: "text/plain",
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: formData({ ipAddr: status.ipAddr, macAddr: status.macAddr }),
  })
    .then((res) => {
      return res.text();
    })
    .then((text) => {
      if (text) {
        ElMessage({
          type: "warning",
          message: text,
        });
      } else {
        ElMessage({
          type: "success",
          message: "Success",
        });
      }
    })
    .catch((err) => {
      ElMessage({
        showClose: true,
        message: "Wake on lan from frpc failed!",
        type: "warning",
      });
    });
}
</script>

<style>
#head {
  margin-bottom: 30px;
}
</style>
